<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script th:src="@{/main/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/main/layui/css/layui.css}">
<script th:src="@{/main/js/jquery-2.1.3.min.js}"></script>
<script th:src="@{/main/js/day.js}" charset="utf-8"></script>
<link rel="stylesheet" th:href="@{/main/css/movie_detail.css}">
<script th:src="@{/main/js/vue.js}" charset="utf-8"></script>
<script>
    function getUserName() {
        return document.cookie.split(";")[0].split("=")[1];
    }
    $(function () {
        let username = getUserName();
        $.ajax({
            type: 'POST',
            url: "/user/getMovieById/" + $("#movie-id").val(), // ajax请求路径
            success:
                function (response) {
                    let data = response.data;
                    render(data);
                }
        })
    })
    function render(json) {
        $("#cover").attr("src", json.mImage);
        $(".m_name").html(json.mName);
        $("#m_type").html(json.mType);
        $("#m_length").html("中国大陆/" + json.mLength + "分钟");
        $("#m_date").html(json.mDate + "中国大陆上映");
        $(".director").html("导演：" + json.mDirector);
        $(".actor").html("演员：" + json.mActor);
        if (json.mBoxOffice == null) {     //没有评分
            $("#score").html("暂无评分");
        } else {
            $("#score").html(json.mBoxOffice);
        }
        $(".dra").html(json.mIntroduction);
    }
</script>
<body>
<div th:replace="common :: header"></div>
<!--电影详情-->
<div class="banner">
    <div class="wrapper clearfix">
        <div class="movieInfo-left">
            <div class="avatar-shadow">
                <img class="avatar" id="cover" src="" alt="">
                <div class="movie-ver"></div>
            </div>
        </div>
        <div class="movieInFo-middle clearfix">
            <div class="movie-brief-container">
                <h1 class="m_name"></h1>
                <ul>
                    <li class="ellipsis">
                        <div class="text-link" id="m_type"></div>
                    </li>
                    <li class="len ellipsis" id="m_length">

                    </li>
                    <li class="len ellipsis" id="m_date">

                    </li>
                    <li>
                        <h3 class="director" style="maring:0;
padding:0;
line-height:20px;"></h3>
                        <p style="margin-left: 55px;"></p>
                    </li>
                    <li>
                        <h3 class="actor" style="maring:0;
padding:0;
line-height:20px;"></h3>
                        <p style="margin-bottom:-30px ;margin-left: 55px;"></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="movie-stats-container">
            <div class="movie-index">
                <p class="movie-index-title">电影评分</p>
                <div class="score">
                    <span class="index-left info-num" id="score">暂无评分</span>
                    <div class="index-right">
                        <span class="score-num">
                            <span class="stonefont"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="movie-index">
                <p class="movie-index-title">累计票房</p>
                <div class="movie-index-content box">
                    <span class="stonefont">5395</span>
                    <span class="unit">万</span>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="movie-id" th:value="${MId}">
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-radius layui-btn-normal" lay-event="buyTicket">购票</a>
</script>
<form class="layui-form" id="date" style="margin-left: 90px;">
    <div class="layui-form-item">
        <label class="layui-form-label">观影时间:</label>
        <div class="layui-input-block" style="margin-top: 40px;">
            <input type="radio" name="date" lay-filter="date" value="0" id="today" checked>
            <input type="radio" name="date" lay-filter="date" value="1" id="tomorrow">
            <input type="radio" name="date" lay-filter="date" value="2" id="next">
            <input type="radio" name="date" lay-filter="date" value="3" id="nextday">
        </div>
    </div>
</form>
<table style="text-align: center;" id="demo"  lay-filter="test"></table>
</body>
</html>
<script th:inline="none">
    $(function () {
        function getDate(num) {
            let date = new Date();
            date.setDate(date.getDate() + num)
            //当使用setDate()之后，date对象就发生了改变，所以之后getDate()就能获取到指定的日期
            //这里的num就是你要加的天数，减也可以。
            let year = date.getFullYear()				//年
            let month = date.getMonth() + 1				//月
            let day = date.getDate();					//天数
            if (month >= 1 && month <= 9) {
                month = `0${month}`
            }
            if (day >= 1 && day <= 9) {
                day = `0${day}`
            }
            return `${year}-${month}-${day}`
        }
        function getWeekDate(date) {
            var now = new Date(date);
            var day = now.getDay();
            var weeks = new Array(
                "周日",
                "周一",
                "周二",
                "周三",
                "周四",
                "周五",
                "周六"
            );
            var week = weeks[day];
            return week;
        };
        let today = dayjs(getDate(0)).format('MM月DD日');
        console.log(today)
        let tomorrow = dayjs(getDate(1)).format('MM月DD日')
        let next = dayjs(getDate(2)).format('MM月DD日');
        let nextday = dayjs(getDate(3)).format('MM月DD日');
        $("#today").next(".layui-form-radio").find("div").text("今天 " + today);
        $("#tomorrow").next(".layui-form-radio").find("div").text("明天 " + tomorrow);
        $("#next").next(".layui-form-radio").find("div").text("后天 " + next);
        $("#nextday").next(".layui-form-radio").find("div").text(getWeekDate(getDate(3)) +" "+ nextday);
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,id:'idTest'
                , url: '/plan/getPlanByMIdAndTime/' + $("#movie-id").val() //数据接口
                , where: {
                    Time: 0
                }
                ,css:'.layui-table-view {margin-left: 110px;}'
                , cols: [[ //表头
                    , {
                        field: 'startDate',
                        align: 'center',
                        title: '放映时间',
                        width: 320,
                        style: 'width: 320px;text-align: center;margin-top: 20px;height: 70px;font-weight: 700;',
                        templet: function (d) {
                            return dayjs(d.startDate).format('HH时MM分')
                        }
                    },
                    , {
                        field: 'hName',
                        align: 'center',
                        style: 'width:300px;text-align:center;font-size:16px',
                        title: '放映位置',
                        width: 300
                    }
                    , {
                        field: 'price', align: 'center', title: '售价', width: 329, templet: function (d) {
                            let price = d.price;
                            return '<span class="layui-icon layui-icon-rmb"></span>' + '<span style="margin-left:3px;font-size: 18px">' + price + '</span>';
                        }, style: 'color:red;width:329px;text-align:center;'
                    }
                    , {
                        title: '购票',
                        align: 'center',
                        width: 250,
                        fixed: 'right',
                        style: 'width:250px;height: 46px;',
                        toolbar: '#currentTableBar',
                        align: "center"
                    }
                ]]
                , width: 1200
                , skin: 'line'
            });
            form.on('radio(date)', function (data) {
                table.reloadData('idTest', {
                    where: {
                        Time: data.value
                    }
                })
            });
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                console.log(data)
                if (obj.event === 'buyTicket') {
                    window.location = '/buyTicket/'+data.id
                }
            });
        });
    })
</script>